<!DOCTYPE html>
<html>
	<head>
		<!-- meta block -->
		<title>Diagram with Editor in default mode. Auto layout button - DHTMLX Diagram</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
		
		<link rel="shortcut icon" href="./common/favicon/favicon.ico" type="image/x-icon" />
		<link rel="icon" href="./common/favicon/icon-16.png" sizes="16x16" />
		<link rel="icon" href="./common/favicon/icon-32.png" sizes="32x32" />
		<link rel="icon" href="./common/favicon/icon-48.png" sizes="48x48" />
		<link rel="icon" href="./common/favicon/icon-96.png" sizes="96x96" />
		<link rel="icon" href="./common/favicon/icon-144.png" sizes="144x144" />
		<!-- end meta block -->
		<link rel="stylesheet" href="./common/index.css?v=4.1.0">
		<!-- custom sample head -->
		<script type="text/javascript" src="./common/data.js?v=4.1.0"></script>
		<script type="text/javascript" src="../codebase/diagramWithEditor.js?v=4.1.0"></script>
		<link rel="stylesheet" href="../codebase/diagramWithEditor.css?v=4.1.0">
		<style>
			html, body, .dhx_diagram {
				background: #fff;
			}
			.dhx_sample-widget {
				height: calc(100% - 61px);
			}
		</style>
	</head>
	<body>
		<header class="dhx_sample-header">
			<div class="dhx_sample-header__main">
				<nav class="dhx_sample-header__breadcrumbs">
					<ul class="dhx_sample-header-breadcrumbs">
						<li class="dhx_sample-header-breadcrumbs__item">
							<a href="./index.html" class="dhx_sample-header-breadcrumbs__link">Back to Diagram samples</a>
						</li>
					</ul>
				</nav>
				<h1 class="dhx_sample-header__title">
					<div class="dhx_sample-header__content">
						Diagram with Editor in default mode. Auto layout button
					</div>
				</h1>
			</div>
		</header>
		<div class="dhx_sample-widget" id="editor"></div>
		<script>
			const editor= new dhx.DiagramEditor("editor", {
				type: "default",
				autoplacement: {
					mode: "direct",
				}
			});

			editor.parse(auto_place_data);
		</script>
	</body>
</html>
